<template>
    <div v-if="!isBrowserCompatible" class="browser-compatibility wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="1s">
        <div class="compatibility-content">
            <h2>浏览器不兼容提示</h2>
            <p>您当前使用的浏览器版本过低或不兼容，无法正常访问本系统。</p>
            <p class="current-browser">当前浏览器：{{ currentBrowser }} {{ currentVersion }}</p>
            <p>请使用以下浏览器的最新版本：</p>
            <ul>
                <li class="wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="1s">
                    <i class="browser-icon edge"></i>
                    <span>Edge</span>
                    <small>最新两个版本</small>
                </li>
                <li class="wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="1s">
                    <i class="browser-icon firefox"></i>
                    <span>Firefox</span>
                    <small>最新两个版本</small>
                </li>
                <li class="wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="1s">
                    <i class="browser-icon chrome"></i>
                    <span>Chrome</span>
                    <small>最新两个版本</small>
                </li>
                <li class="wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="1s">
                    <i class="browser-icon safari"></i>
                    <span>Safari</span>
                    <small>最新两个版本</small>
                </li>
                <li class="wow animate__animated animate__fadeIn" data-wow-duration="2s" data-wow-delay="1s">
                    <i class="browser-icon opera"></i>
                    <span>Opera</span>
                    <small>最新两个版本</small>
                </li>
            </ul>
            <p class="warning">注意：本系统不支持 IE 和 360 浏览器，请使用其他推荐的浏览器。</p>
        </div>
    </div>
    <div v-else>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const isBrowserCompatible = ref(true)
const currentBrowser = ref('')
const currentVersion = ref('')

const checkBrowserCompatibility = () => {
    const ua = navigator.userAgent.toLowerCase()
    
    // 检测 IE 浏览器
    const isIE = () => {
        return ua.indexOf('msie') > -1 || ua.indexOf('trident') > -1
    }

    // 检测 360 浏览器
    const is360 = () => {
        const mimeTypes = navigator.mimeTypes;
        return mimeTypes && mimeTypes.length > 0 && mimeTypes[0].type === 'application/vnd.chromium.remoting-viewer';
    }

    // 检测是否为 IE 或 360 浏览器
    if (isIE() || is360()) {
        currentBrowser.value = isIE() ? 'IE浏览器' : '360浏览器'
        currentVersion.value = '不兼容'
        isBrowserCompatible.value = false;
        return;
    }

    const isChrome = ua.indexOf('chrome') > -1
    const isFirefox = ua.indexOf('firefox') > -1
    const isSafari = ua.indexOf('safari') > -1 && ua.indexOf('chrome') === -1
    const isEdge = ua.indexOf('edg') > -1
    const isOpera = ua.indexOf('opr') > -1

    // 获取浏览器版本
    const getVersion = (ua: string) => {
        const match = ua.match(/(chrome|firefox|safari|edg|opr)\/(\d+)/i)
        return match ? parseInt(match[2]) : 0
    }

    const version = getVersion(ua)
    
    // 设置当前浏览器信息
    if (isChrome) {
        currentBrowser.value = 'Chrome'
    } else if (isFirefox) {
        currentBrowser.value = 'Firefox'
    } else if (isSafari) {
        currentBrowser.value = 'Safari'
    } else if (isEdge) {
        currentBrowser.value = 'Edge'
    } else if (isOpera) {
        currentBrowser.value = 'Opera'
    } else {
        currentBrowser.value = '未知浏览器'
    }
    currentVersion.value = version.toString()
    
    // 检查版本兼容性 - 获取最新两个版本
    const latestVersions = {
        chrome: 130,
        firefox: 130,
        safari: 17,
        edge: 130,
        opera: 100
    }
    
    if ((isChrome && version < latestVersions.chrome) ||
        (isFirefox && version < latestVersions.firefox) ||
        (isSafari && version < latestVersions.safari) ||
        (isEdge && version < latestVersions.edge) ||
        (isOpera && version < latestVersions.opera)) {
        isBrowserCompatible.value = false
    }
}

onMounted(() => {
    checkBrowserCompatibility()
})
</script>

<style scoped>
.browser-compatibility {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.compatibility-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    max-width: 800px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.compatibility-content h2 {
    color: #ff4d4f;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.compatibility-content p {
    margin: 1rem 0;
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
}

.current-browser {
    background: #f0f5ff;
    padding: 0.8rem;
    border-radius: 8px;
    color: #2f54eb;
    font-weight: 500;
    border: 1px solid #d6e4ff;
    margin: 1.5rem 0;
}

.compatibility-content ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.compatibility-content li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
}

.compatibility-content li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.compatibility-content li span {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.compatibility-content li small {
    color: #888;
    font-size: 0.9rem;
}

.browser-icon {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.browser-icon.edge {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%230078D7" d="M11.5 2.5c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>');
}

.browser-icon.firefox {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF7139" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.browser-icon.chrome {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234285F4" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.browser-icon.safari {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000000" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.browser-icon.opera {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF1B2D" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.warning {
    color: #ff4d4f;
    font-weight: 600;
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(255, 77, 79, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 77, 79, 0.2);
}
</style> 